<template>
  <div class="topbg">
    <el-row class="top_row">
      <el-col :span="15" class="logol">
        <div class="buttonL">东营区综合行政执法局防汛监测预警系统</div>
      </el-col>
      <el-col :span="9" class="nav_content">
        <el-row class="nav_right">
          <el-col :span="14" class="nav_right1">
            <div class="right1_box" @click="toWaring">
              <div class="icon_box">
                <img class="icon_item" src="../../assets/png/warn2.png" alt>
              </div>
              <p>报警信息</p>
            </div>
            <div class="right1_box" @click="screen">
              <div class="icon_box" v-show="!isFullscreen">
                <i class="el-icon-full-screen icon_item"></i>
              </div>
              <p v-show="!isFullscreen">全屏</p>

              <div class="icon_box" v-show="isFullscreen">
                <i class="el-icon-full-screen icon_item"></i>
              </div>
              <p v-show="isFullscreen" class="span4">退出全屏</p>
            </div>
            <div class="right1_box" @click="reload">
              <div class="icon_box">
                <i class="el-icon-refresh icon_item"></i>
              </div>
              <p>刷新</p>
            </div>
          </el-col>
          <el-col :span="10" class="nav_right2">
            <div class="user_name">
              <span>
                <i>管理员：</i>
                <i>admin</i>
              </span>
              <span class="logout_span" @click="handleCommand">
                <i class="el-icon-switch-button"></i>
                <i class="logout_text">退出</i>
              </span>
            </div>
            <div class="now_time">
              <span v-cloak>{{ fromTimeN }}</span>
              <span v-cloak>{{ fromTimeS }}</span>
              <span class="timeSpan" v-cloak>{{ str }}</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fromTimeN: '',
      fromTimeS: "",
      timeOur: '',
      isFullscreen: false,
      str: ''
    };
  },
  mounted() {
    // 监听屏幕窗口变化用$nextTick()
    let that = this;
    this.$nextTick(() => {
      window.onresize = function temp() {
        that.isFullScreen();
      };
    });
  },
  methods: {
    // 跳转到报警信息路由
    getWarninfo() {
      console.log("123");
    },
    //判断全屏状态
    isFullScreen() {
      this.isFullscreen =
        document.isFullScreen ||
        document.mozIsFullScreen ||
        document.webkitIsFullScreen;
    },
    // 全屏
    screen() {
      let element = document.documentElement;
      if (this.isFullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.isFullscreen = !this.isFullscreen;
    },
    //退出登陆
    handleCommand(command) {
      // this.$message(command);
      localStorage.clear();
      this.$router.push("/login");
    },
    //初始化时间
    initializationTime() {
      let time = new Date();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minutes = time.getMinutes();
      let seconds = time.getSeconds();
      let week = time.getDay(); //获取星期几
      if (week == 0) {
        this.str = "星期日";
      } else if (week == 1) {
        this.str = "星期一";
      } else if (week == 2) {
        this.str = "星期二";
      } else if (week == 3) {
        this.str = "星期三";
      } else if (week == 4) {
        this.str = "星期四";
      } else if (week == 5) {
        this.str = "星期五";
      } else if (week == 6) {
        this.str = "星期六";
      }
      const res =
        time.getFullYear() +
        "年" +
        (month < 10 ? "0" + month : month) +
        "月" +
        (date < 10 ? "0" + date : date) +
        "日";
      const resDate =
        (hours < 10 ? "0" + hours : hours) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (seconds < 10 ? "0" + seconds : seconds);
      this.fromTimeN = res;
      this.fromTimeS = resDate;
    },
    timeOpen() {
      clearInterval(this.timeOur);
      this.timeOur = setInterval(() => {
        this.initializationTime();
      }, 1000);
    },
    reload() {
      location.reload();
    },
    toWaring(){
      this.$router.push('/warnrecord/index')
    }
  },
  created() {
    this.timeOpen();
  },
  destroyed() {
    clearInterval(this.timeOur);
    this.timeOur = null;
  }
};
</script>

<style scoped lang="less">
[v-cloak] {
  display: none;
}
i {
  font-style: normal;
}
.topbg {
  width: 100%;
  height: 100%;
  background-color: #4E72C8;
  .top_row {
    width: 100%;
    height: 100%;
    .logol {
      height: 100%;
    
      .buttonL {
      height: 86px;
        font-size: 38px;
        line-height: 86px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }
    .nav_content {
      height: 100%;
     
      .nav_right {
        height: 100%;
        .nav_right1 {
          display: flex;
          box-sizing: border-box;
          padding: 0 20px;
          align-items: center;
          justify-content: space-between;
          height: 100%;
          .right1_box {
            width: 32%;
            height: 100%;
            cursor: pointer;
            margin: 10px;
           
            .icon_box {
              width: 18px;
              height: 18px;
              text-align: center;
              margin: 15px auto;
              line-height: 18px;
           
              .icon_item {
                font-size: 18px;
                color: #fff;
              }
              img {
                width: 100%;
                vertical-align: middle;
              }
            }
            p {
              height: 20px;
              line-height: 20px;
              color: #fff;
            }
          }
        }
        .nav_right2 {
          // width: 100%;
          height: 100%;
        
          .user_name {
            width: 100%;
            height: 50%;
         
            .logout_span {
              cursor: pointer;
              .logout_text {
                margin: 10px;
              }
            }
            span {
              margin: 16px;
              line-height: 35px;
              color: #fff;
            }
          }
          .now_time {
            width: 100%;
            height: 50%;
           
            span {
              margin: 8px;
              color: #fff;
              line-height: 35px;
            }
          }
        }
      }
    }
  }
}

</style>
